<template>
  <el-dialog width="500px" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="请选择商户" prop="member_id">
        <el-select v-model="form.member_id" clearable filterable placeholder="请选择商户" @change="handleChange">
          <el-option v-for="item in shopList" :key="item.id" :label="item.shopname" :value="item.member_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单来源" prop="from_name">
        <el-select v-model="form.from_name" clearable multiple placeholder="请选择来源" @change="handleFrom">
          <el-option v-for="item in fromList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="风控等级" prop="grade_name">
        <el-select v-model="form.grade_name" clearable multiple placeholder="请选择风控" @change="handleGrade">
          <el-option v-for="item in gradeList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品品类" prop="goods_name">
        <el-select v-model="form.goods_name" clearable multiple placeholder="请选择商品品类" @change="handleGoods">
          <el-option v-for="item in goodsList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监管设备" prop="is_supervise">
        <el-select v-model="form.is_supervise" clearable placeholder="请选择监管设备" @change="handleSupervise">
          <el-option v-for="item in superviseList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="成新度" prop="is_news">
        <el-select v-model="form.is_news" clearable multiple placeholder="请选择成新度" @change="handleNews">
          <el-option v-for="item in newsList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="履约状态" prop="performance">
        <el-select v-model="form.performance" clearable multiple placeholder="请选择履约状态" @change="handlePerformance">
          <el-option v-for="item in performanceList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
			<el-form-item label="数量" prop="number">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="订单池">
        <el-radio-group v-model="form.is_first">
          <el-radio-button label="1">优先池</el-radio-button>
          <el-radio-button label="2">普通池</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getShopUser,addSupplier,addSupplierData } from '@/api/user'
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    editItem: {
      type: Object,
      default: () => { }
    },
    isFirst: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      form: {
        member_id: '',
        is_first: '',
        category_id:'',
        number:'',
        from_name:'',
        grade_name:'',
        goods_name:'',
        is_news:'',
				performance:'',
        is_supervise:''
      },
      shopList: [],
      goodsList:[],
      gradeList:[],
      fromList:[],
      newsList:[],
      superviseList:[],
      rules: {
        member_id: [
          { required: true, message: '请选择商户名称', trigger: 'blur' },
        ]
      },
      dialogVisible: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.form.is_first=this.isFirst
        addSupplierData().then(res=>{
          this.fromList=res.source
          this.gradeList=res.risk
          this.newsList=res.new_grade
          this.goodsList=res.category
          this.superviseList=res.supervise
          this.performanceList=res.performance
        })
        // 获取商户数据
        getShopUser().then(res=>{
          this.shopList=res
        })
      } else {
        this.$refs['ruleForm'].resetFields()
      }
    }
  },
  methods: {
    handleSupervise(e){
      this.form.is_supervise=e
    },
    handleNews(e){
      this.form.is_news=e
    },
    handleFrom(e){
      this.form.from_name=e
    },
    handleGoods(e){
      this.form.goods_name=e
    },
    handleGrade(e){
      this.form.grade_name=e
    },
    handlePerformance(e){
      this.form.performance=e
    },
    // handleChange
    handleChange(e){
      // console.log(e);
    },
    // 
    setUrl(key, value) {
      this.form[key] = value
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params={
            member_id:this.form.member_id,
            is_first:this.form.is_first,
            category:'1:'+this.form.from_name+'|'+'2:'+this.form.grade_name+'|'+'3:'+this.form.goods_name+'|'+'4:'+this.form.is_news+'|'+'5:'+this.form.is_supervise+'|'+'6:'+this.form.performance,
            number:this.form.number
          }
          addSupplier(params).then(res=>{
						this.dialogVisible=false
            this.$emit('getList', true)
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
